Vue.component('yl-table', {
    template: `<div>
    <el-row :gutter="10">
        <el-col :span="span" v-for="i in count" :key="i">
            <el-table :data="data.slice((page-1+(i-1))*limit,(page+(i-1))*limit)" stripe border style="width: 100%">
                <el-table-column prop="1" align="center" label="序号" width="50">
                    <template v-slot="{row,$index}">
                        {{$index + 1 + (i-1)*10}}
                    </template>
                </el-table-column>
                <slot></slot>
                <el-table-column label="操作" align="center" width="80">
                    <template v-slot="{row,$index}">
                        <el-button size="small" type="danger" @click="handleRemove($index,i)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10*num, 20*num, 30*num, 40*num]"
        :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="data.length">
    </el-pagination></div>`,
    props: {
        data: {
            type: Array,
            default: function () {
                return []
            }
        },
        num: {
            type: Number,
            default: 3
        }
    },
    data() {
        return {
            form: {
                page: 1,
                limit: this.num * 10
            }
        }
    },
    computed: {
        page() {
            return 1 + (this.form.page - 1) * this.num;
        },
        limit() {
            return this.form.limit / this.num;
        },
        span() {
            return 24 / this.count;
        },
        count() {
            if (this.data.length < this.form.limit) {
                let length = this.data.length == 0? 0 : this.data.length -1
                let num = parseInt(length / this.limit) + 1
                return num;
            } else {
                return this.num;
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            this.form.page = 1;
            this.form.limit = val;
        },
        handleCurrentChange(val) {
            this.form.page = val;
        },
        handleRemove(index, i) {
            let page = this.form.page;
            let limit = this.form.limit / this.num;
            let $i = (page - 1) * this.form.limit + (index + (i - 1) * limit);
            this.$emit('remove',$i);
        }
    },
})
new Vue({
    el: '#app',
    data() {
        return {
            form: {
                Activity_SerialNumber: '',
                Activity_Name: '',//供应商名称
                Activity_Notice: '',//所属地址
                Page_SerialNumber:'P00000000000024',
                Start_Date: '',
                End_Date: '',
                Date:null,
                Activity_Notes: '',
                Enterprise_Info_SerialNumber: '',
                Children: {
                    business_activity_article: [],
                    business_activity_member: [],
                },

            },
            page:[],
            tableData: [],
            rules: {
                Page_SerialNumber: [{ required: true, message: '请输入选择活动页面', trigger: 'change' }],
                Date:[{ required: true, message: '请选择执行时间', trigger: 'blur' }]
            },
            department: [],
            business_department_info: [],
            article_specifications: [],
            dialogVisible:false,
            loading: false,
            defaultProps: {
                children: 'Children',
                label: 'Department_Name',
                value: 'Department_SerialNumber',
                checkStrictly: true,
                multiple: true
            },
            drawer:false,
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getArticle(data){
            this.article_specifications = [... this.article_specifications,...data];
        },
        getData() {
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'POST',
                data: {
                    Data: "base_page_info",
                    Condition: "Row_Status='0' and Absolute_Path<>''"
                },
                success: function (data) {
                    data.forEach((item,index)=>{
                        item.is = index == 0 ? true : false;
                    })
                    that.page = data;
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/getAllDepartmentByUserName?UserName=&ParentNumber=`,
                type: 'GET',
                success: function (data) {
                    that.department = data;
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        submitForm(formName) {
            const that = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    that.article_specifications.forEach(item => {
                        that.form.Children.business_activity_article.push({
                            Activity_Article_SerialNumber: '',
                            Activity_SerialNumber: '',
                            Supplier_Article_SerialNumber: item.Supplier_Article_SerialNumber,
                            Article_SerialNumber: item.Article_SerialNumber,
                            Article_Specifications_SerialNumber: item.Article_Specifications_SerialNumber,
                            Activity_Unit_Price: item.Activity_Unit_Price,
                        })
                    })
                    that.form.Start_Date = that.form.Date[0];
                    that.form.End_Date = that.form.Date[1];

                    that.form.DepartmentJSON = JSON.stringify(that.business_department_info)
                    that.form.Children.business_activity_member = [];
                    that.business_department_info.forEach(item=>{
                        that.form.Children.business_activity_member.push({
                            Activity_Member_SerialNumber: '',
                            Activity_SerialNumber: '',
                            Department_SerialNumber: item[item.length-1]
                        })
                    })
                    that.check(()=>{
                        $.ajax({
                            headers: requestHeaders(),
                            url: `${BASE_URL2}/generalBusiness/generalSave`,
                            type: 'POST',
                            data: {
                                Data: JSON.stringify({ 
                                    Add: { 
                                        business_activity: [that.form] ,
                                        base_operation_log:[generateLog('添加新活动--'+that.form.Activity_Name, '平台端操作', 'business_activity', JSON.stringify({ Add: { business_activity: [that.form] } }))]
                                    },
                                })
                            },
                            success: function (res) {
                                if (res.Status === 'success') {
                                    that.$message.success("提交成功")
                                    window.location.href = './index.html';
                                } else {
                                    that.$message.error("提交失败，请稍后再试")
                                }
                            },
                            complete: function (XMLHttpRequest) {
                                that.loading = false
                                requestPretreatment(XMLHttpRequest);//config/config.js 响应预检
                            },
                            dataType: "json"
                        })
                    })
                } else {
                    that.$message({
                        message: sumberError,
                        type: 'warning'
                    })
                    return false;
                }
            });
        },
        check(callback) {
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                type: 'POST',
                data: {
                    Data: 'business_activity',
                    Condition:"Row_Status <> '1' and Activity_Name='"+this.form.Activity_Name+"'",
                },
                success: function (res) {
                    if (res.length == '0') {
                        callback()
                    } else {
                        that.$message.error("提交失败，当前活动名称已存在");
                        that.loading = false;
                    }
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);//config/config.js 响应预检
                },
                dataType: "json"
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleRemove($i) {
            this.article_specifications = this.article_specifications.filter((i, id) => id != $i)
        },
        handlePage(item){
            this.page.forEach(item=>{
                item.is = false;
            });
            item.is = true;
        }
    }
})